<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
  <h1>axios请求拦截器</h1>
  <input type="text">
  <button type="submit">发送请求</button>
  <script>
    const oBnt = document.querySelector('button')

    //创建一个axios实列 并配置
    const myAxios = axios.create({
      baseURL: '/', //配置公共路径
      timeout: 10000, //配置超时
      headers: {
        name: 'li'
      } //配置请求头
    })

    /* 
    use方法接受两个回调函数,正常都会进入到第一个回调函数中
      只有以下两种情况会触发异常处理的回调(了解):
        - use额外配置第三个参数options
        - 当同时设置多个同类型拦截器的时候,如果第二个拦截器中的处理出现错误,则会执行第一个拦截器中的异常处理函数
    当你想要获得某个值 那个值大多在参数中    
    */
    //请求拦截器
    myAxios.interceptors.request.use((c) => {
      alert('开始发请求')
      //在请求拦截器中可以拿到axios的配置对象,配置对象中config.headers.common是请求头的配置
      console.log('c', c);
      //把配置对象返回出去
      return c
    }, (e) => {

      //如果失败则快速返回一个失败的promise的实列 
      return Promise.reject(e.message)
    })
    oBnt.onclick = async function () {
      //因为axios实列的返回值是promise的实列，所以这里的await可以等待
      //await等到的就是promise实列的值
      const result = await myAxios.get('/user', {
        //查询字符串
        params: {
          userId: "001"
        }
      })
      console.log('result', result); //获取到响应的内容
    }
  </script>
</body>

</html>